<template>
    <div class="productInfo">
        <div id="main">
           <div class="details">
               <div class="productBox">
                  <p>{{detailsArr.title}}</p>
                  <div class="animalBox">
                      <div class="parameter">
                         <div class="parameterLeft">
                             <span>{{detailsArr.code}}</span>
                             <span v-if="detailsArr.type=='10' ? false : true">{{detailsArr.local}}</span>
                         </div>
                         <div class="parameterRight">
                            <span>{{detailsArr.case}}</span>
                            <span>{{detailsArr.size}}</span>
                         </div>
                      </div>
                      <div class="animalImg">
                          <img :src="detailsArr.image">
                          <span>{{$t('contact.product')}}</span>
                      </div>
                      <div class="quantity">
                         <span>12-piece Puzzle</span>
                         <span class="fourCenter" v-if="detailsArr.type=='10' ? false : true">4 Animal Figurines African Lion, Black Rhinoceros, Cheetah, Plains Zebra  </span>
                         <span class="center" v-if="detailsArr.type=='20' ? false : true">Jaguar Figurine</span>
                         <span class="center2" v-if="detailsArr.type=='20' ? false : true">Animal Facts Card</span>
                         <span>AR Game</span>
                      </div>
                  </div>
               </div>
           </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '@/components/footer'
import Loading from '@/components/loading'
export default {
  name: "productInfo",
  components:{
     Footer,
     Loading
  },
  data () {
    return {
        name:'我要测试首页',
        detailsArr:[]
    }
  },
  mounted:function(){ 
       window.scrollTo(0, 0);
  },
  methods:{
      getData(){
          this.$loading(this.$t("contact.loading"));
          let self = this;
          let penga = this.$route.query.id;
          console.log(JSON.stringify(penga));
          axios.get('/api/products/'+penga+'?include=attributes')
          .then(function (response) {
             self.closeLoading();
             //console.log(JSON.stringify(response.data));
             self.detailsArr = response.data;
          })
          .catch(function (error) {
              console.log(JSON.stringify(error));
          })  
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function(){
     this.getData();
  }
};
</script>
<style scoped>
   @import "../assets/css/productInfo.css";
</style>